<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background: #222;
        }

        h2 {
            color: #666;
            font-family: monospace;
            text-align: center;
        }

        .background {
            table-layout: fixed;
            border-spacing: 0;
        }

        .background td {
            padding: 0;
        }

        .lava, .actor {
            background: #e55;
        }

        .wall {
            background: #444;
            border: solid 3px #333;
            box-sizing: content-box;
        }

        .actor {
            position: absolute;
        }

        .coin {
            background: #e2e838;
            border-radius: 50%;
        }

        .player {
            background: #335699;
            box-shadow: none;
        }

        .lost .player {
            background: #a04040;
        }

        .won .player {
            background: green;
        }

        .game {
            position: relative;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="gameBox" style="background-color: #5bb75b;margin:0 auto;width: auto;height: auto;">

</div>
</body>
<script src="js/socket.io/socket.io.js"></script>
<script src="js/moment.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<script>
    var socket = io.connect('http://192.168.1.20:9092');
    socket.on('connect', function () {
        console.log("链接上了")
    });
    socket.on('gameMessage', function (data) {
        actors = data;
        updateActors();
    });

</script>

<script>
    var levels = ["                                                                                ",
        "                                                                                ",
        "                                                                                ",
        "                                                                                ",
        "                                                                                ",
        "                                                                                ",
        "                                                                  xxx           ",
        "                                                   xx      xx    xx!xx          ",
        "                                    o o      xx                  x!!!x          ",
        "                                                                 xx!xx          ",
        "                                   xxxxx                          xvx           ",
        "                                                                            xx  ",
        "  xx                                      o o                                x  ",
        "  x                     o                                                    x  ",
        "  x                                      xxxxx                             o x  ",
        "  x          xxxx       o                                                    x  ",
        "  x  @       x  x                                                xxxxx       x  ",
        "  xxxxxxxxxxxx  xxxxxxxxxxxxxxx   xxxxxxxxxxxxxxxxxxxx     xxxxxxx   xxxxxxxxx  ",
        "                              x   x                  x     x                    ",
        "                              x!!!x                  x!!!!!x                    ",
        "                              x!!!x                  x!!!!!x                    ",
        "                              xxxxx                  xxxxxxx                    ",
        "                                                                                ",
        "                                                                                "
    ];

    function element(name, className) {
        var elem = document.createElement(name);
        if (className) elem.className = className;
        return elem;
    }

    var scale = 15;

    function Vector(x, y) {
        this.x = x;
        this.y = y;
        this.id = uuid();
    }

    var actors;

    var vector;

    function drawBack() {
        var table = element("table", "mytable");
        var gameBox = document.getElementById("gameBox");
        gameBox.appendChild(table);
        levels.forEach(function (row, index) {
            var rowElement = table.appendChild(element("tr"));
            rowElement.style.height = scale + "px";

            for (var i = 0; i < row.length; i++) {
                var col = row.charAt(i);
                var fieldType = "";
                if (col === "x")
                    fieldType = "wall";
                else if (col === "!")
                    fieldType = "lava";
                else if (col === "|")
                    fieldType = "lava";
                else if (col === "=")
                    fieldType = "lava";
                else if (col === "v") {
                    fieldType = "lava";
                } else if (col === "@") {
                    vector = new Vector(i, index);
                    socket.emit('updateUserIndex', vector);
                    // fieldType = "player";
                }
                var td = element("td", fieldType);
                rowElement.appendChild(td);
            }

        })
    }

    function uploadMe(x, y, uuid) {

    }

    function getAllUser(x, y) {

    }

    var arrowCodes = {
        37: "left",
        38: "up",
        39: "right",
        40: "down"
    };

    function moveActors(event) {
        console.log(event.keyCode);

        switch (event.keyCode) {
            case 37:
                vector.x = vector.x - 1;
                break;
            case 38:
                vector.y = vector.y - 1;
                break;
            case 39:
                vector.x = vector.x + 1;
                break;
            case 40:
                vector.y = vector.y + 1;
                break;
        }
        socket.emit('updateUserIndex', vector);

        // if (codes.hasOwnProperty(event.keyCode)) {
        //     var down = event.type == "keydown";
        //     pressed[codes[event.keyCode]] = down;
        //     event.preventDefault();
        // }
    }

    function updateActors() {
        //清空所有的格子
        var playerElements = document.getElementsByClassName("player");
        for (var i = 0; i < playerElements.length; i++) {
            playerElements[i].className = "";
        }
        console.log(actors);
        actors.forEach(function (item) {
            var table = document.getElementsByClassName("mytable")[0];
            var rows = table.rows;
            var newActorsCell = rows[item.y].cells[item.x];
            newActorsCell.className = "player";
        });
    }

    function uuid() {
        var s = [];
        var hexDigits = "0123456789abcdef";
        for (var i = 0; i < 36; i++) {
            s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
        }

        s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
        s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
        s[8] = s[13] = s[18] = s[23] = "-";

        var uuid = s.join("");
        return uuid;
    }

    addEventListener("keydown", moveActors);
    // addEventListener("keyup", moveActors);

    drawBack()
</script>


</html>